import React, { PureComponent } from 'react';
import {
  View,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
} from 'react-native';

class PollingItem extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _itemClick = () => {
    if (this.props.onClick) {
      this.props.onClick(this.props.data);
    }
  }

  getStatus = (type) => {
    switch (type) {
      case '0':
        return styles.error;
      case '1': // 正常
        return styles.normal;
      case '2':
        return styles.other;
      default:
        return '';
    }
  }

  render() {
    let val1;
    let val2;
    let val3;
    if (this.props.fileds) {
      val1 = this.props.data.item[this.props.fileds.firstLineFiled];
      val2 = this.props.data.item[this.props.fileds.secondLineFiled];
      val3 = this.props.data.item[this.props.fileds.thridLineFiled];
    } else {
      val1 = this.props.data.item.resultDesc;
      val2 = this.props.data.item.equipCreateTime;
      val3 = `  ${this.props.data.item.checkTypeDesc}`;
    }
    return (
      <TouchableNativeFeedback onPress={this._itemClick}>
        <View style={styles.itemComtianer}>
          <View style={styles.statusContianer}>
            <View style={[styles.dot, this.getStatus(this.props.data.item.result)]} />
            <Text style={styles.fontColor}>{val1}</Text>
          </View>
          <Text style={styles.fontColor}>{val2}</Text>
          <Text style={styles.fontColor}>
            {this.props.checkUserCode}
            <Text style={[styles.fontColor, { paddingLeft: 20 }]}>
              {val3}
            </Text>
          </Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
}

const styles = StyleSheet.create({
  itemComtianer: {
    backgroundColor: '#ffffff',
    padding: 5,
    marginTop: 15,
    borderRadius: 5,
  },
  fontColor: {
    color: '#000000',
    lineHeight: 24,
  },
  statusContianer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  dot: {
    width: 10,
    height: 10,
    borderRadius: 10,
    marginRight: 5,
  },
  normal: {
    backgroundColor: '#29e121',
  },
  error: {
    backgroundColor: '#e13821',
  },
  other: {
    backgroundColor: 'yellow',
  },
});

export default PollingItem;
